<template>
    <div>
        <el-row :gutter="20" style="height: calc(100vh - 138px);">
            <el-col :span="24">
                <weather/>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple item-2">
                    <center>
                    <span class="txt"> 清清的晨风摇响快乐的铃铛~</span>
                    </center>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple item-2">
                    <center>
                    <span class="txt">
                        盛夏之夜，当一轮明月悬挂在天幕之上，池塘里那挂满露珠的荷叶......
                    </span>
                    </center>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="grid-content bg-purple item">
                    <div style="padding: 15px 20px;line-height: 1.7;">
                        <div style="font-size: 18px;color: #f93a4a">今日推荐：{{menuList.cp_name}}</div>
                        <div v-if="menuList.texing" style="font-size: 14px"><strong style="color:#a69f96;">特性：</strong>{{menuList.texing}}</div>
                        <div style="font-size: 14px" v-if="menuList.tiaoliao"><strong style="color:#a69f96;">调料：</strong>{{menuList.tiaoliao}}</div>
                        <div style="font-size: 14px"><strong style="color:#a69f96;">材料：</strong>{{menuList.yuanliao}}</div>
                        <div style="font-size: 14px"><strong style="color:#a69f96;">做法：</strong>{{menuList.zuofa}}</div>
                        <div v-if="menuList.tishi" style="font-size: 14px"><strong style="color:#a69f96;">提示：</strong><span style="color: #fa7e3e">{{menuList.tishi}}</span></div>
                    </div>
                </div>
            </el-col>
            <el-col :span="24" style="">
                <el-row :gutter="20" style="position: relative;height: calc(100vh - 584px);" class="item-3">
                    <el-col :span="2">
                        <BingDwenDwen style="position: absolute;left: 4%;top: 15%;"/>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple" style="position: absolute;left: 32%;top: 10%;">
                            <div style="padding: 15px 20px;line-height: 1.5;overflow: auto">
                                <div style="font-size: 16px;color: #0f7eee;text-align: center">计划进度</div>
                                <div v-if="planList.length > 0" style="height:calc(100vh - 662px);overflow: auto">
                                <!-- <div v-if="false" style="height:calc(100vh - 662px);overflow: auto"> -->
                                    <div v-for="(item, index) in planList" :key="index">

                                        <div  style="font-size: 16px;display:inline-block;width: 150px;">{{item.priority == 0 ? '' : '(优先级'+item.lvl+')'}}</div>
                                        <div  style="font-size: 16px;display:inline-block;width:200px;">{{item.plan_desc}}</div>
                                        <div style="font-size: 16px;display:inline-block;width:70px;">{{item.state}}</div>
                                        <!--<span class="ys" style="font-size: 16px">风儿轻轻的摇摆。。。</span>-->
                                    </div>
                                </div>
                                <div v-else style="width: 400px;text-align: center;height: calc(100vh - 662px);line-height: calc(100vh - 662px);">
                                    暂无数据
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <BingDwenDwen style="position: absolute;right: 21%;top: 15%;"/>
                    </el-col>

                </el-row>

            </el-col>
        </el-row>
    </div>


</template>

<script>
    import weather from "@/components/weather";
    import BingDwenDwen from "./Bing_Dwen_Dwen";
    import axios from 'axios'
    import {selecttoDayPlanByUserId} from "@/api";
    export default {
        name: "index",
        data(){
            return{
                percentage:100,
                planList:[],
                menuList:{
                    cp_name: "",
                    zuofa: "",
                    texing: "",
                    tishi: "",
                    tiaoliao: "",
                    yuanliao: ""
                }
                }
            },

        components:{
            weather,
            BingDwenDwen
        },

        methods:{
            loadPlanList() {
                this.planList = [];
                let user = window.sessionStorage.getItem('user');
                let dealUser = JSON.parse(user);

                let param = {
                    page: 1,
                    limit: 10000,
                    user_id: dealUser._id,
                    state: '',
                };
                // 查询指定用户的今日计划(含复盘）（分页）
                selecttoDayPlanByUserId(param).then((res) => {
                    if(res.data.code ===200){
                        if (res.data.data.length > 0) {
                            res.data.data.forEach((ele) => {
                                let obj = {
                                    plan_desc: ele.plan_desc,
                                    priority: ele.priority,
                                    begin_time: ele.begin_time,
                                    end_time: ele.end_time,
                                    state: ele.state,
                                    _id: ele._id,
                                    user_id: ele.user_id,
                                    lvl: 'I',
                                }
                                // debugger;
                                switch(ele.priority) {
                                    case '1': obj.lvl = 'I'; break;
                                    case '2': obj.lvl = 'II'; break;
                                    case '3': obj.lvl = 'III'; break;
                                    case '4': obj.lvl = 'IV'; break;
                                    case '5': obj.lvl = 'V'; break;
                                    default: obj.lvl = 'I';
                                }
                                this.planList.push(obj)
                            });
                            //console.log(this.planList);

                        }
                        // console.log(res.data.data);
                    }
                });
            },
            customColorMethod(percentage) {
                if (percentage < 30) {
                    return '#909399';
                } else if (percentage < 70) {
                    return '#e6a23c';
                } else {
                    return '#67c23a';
                }
            },
            getNews(){
                let arr=['白菜','肉','辣椒','鸡蛋','黄瓜','鱼','鸭','牛肉','羊肉','蛋糕','披萨','果酱','羊排','番茄','丝瓜','土豆']
                let word= arr[Math.floor((Math.random()*arr.length))]
                axios.get('https://api.tianapi.com/caipu/index?key=a54b3f55a65cb01ed59f9e8fa588fc36&word='+`${word}`).then(res=>{
                    if (res.data.code===200&&res.data.msg==='success'){
                        this.menuList=res.data.newslist[0]
                    }
                })
            }
        },
        created() {
            this.getNews();
            this.loadPlanList();
        }
    }
</script>

<style lang="less">
    .item {
        background-color: white;
        margin-top: 10px;
        border-radius: 10px;
        height: 160px;
        overflow:auto;
        box-shadow: 0 0 1.5rem rgba(9,41,77,0.12);
    }
    .item-3 {
        background-color: white;
        margin-top: 10px;
        border-radius: 10px;
        height: 160px;
        overflow:auto;
        box-shadow: 0 0 1.5rem rgba(9,41,77,0.12);
    }


    .item-2{
        height: 56px;
        background-color: white;
        border-radius: 10px;
        margin-top: 10px;
        box-shadow: 0 0 1.5rem rgba(9,41,77,0.12);
    }
    .txt{
        height:53px;
        text-align:center;
        display: table-cell;
        vertical-align:middle;
    }

    .ys {
        position: relative;
    &::before {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         border: 2px solid gold;
         animation: clippath 3s infinite linear;
     }
    }
    @keyframes clippath {
        0%,
        100% {
            clip-path: inset(0 0 95% 0);
        }
        25% {
            clip-path: inset(0 95% 0 0);
        }
        50% {
            clip-path: inset(95% 0 0 0);
        }
        75% {
            clip-path: inset(0 0 0 95%);
        }
    }
</style>